<template>
	<view class="page_container">
		<navBar>我的点赞</navBar>
		<view class="content_container">
			<view class="tabs_container">
				<view class="table_item" @click="changeInd(0)"><text :style="{ 'border-bottom': '4rpx solid ' + (index == 0 ? '#139DFE' : '#fff') }">我的点赞</text></view>
				<view class="table_item" @click="changeInd(1)"><text :style="{ 'border-bottom': '4rpx solid ' + (index == 1 ? '#139DFE' : '#fff') }">我踩</text></view>
			</view>
			<view class="articles_container">
				<mescroll :up="upOption" :down="downOption" @down="downCallback" @up="upCallback" @init="mescrollInit" @scroll="scrollPause">
					<general-card v-for="(item, index) in articleArry" :key="index" :tltle="item.author.nickname" :avatar="item.author.avatar_url"
					 :note="item.create_time">
						<view class="title" @click="go_articles_details(item)">
							<text>{{ item.content }}</text>
						</view>
						<view class="close" slot="header_right_extend"><text class="iconfont icon-guanbi" @click="removeSlef"></text></view>
						<view class="medias" slot="body_extend" v-if="item.files[0]">
							<single-media class="width100" v-if="item.files.length < 2" :isImage="item.files[0].file_type === 0" :file="item.files[0]"
							 maxWidth="450" @playVideo.stop="playVideo" />
							<media-scratchable-latex class="width100" v-else :files="item.files" :width="670" space="4" />
						</view>
						<!-- card_extend -->
						<!-- <view class="good_comments" slot="card_extend">{{ item.good_comment }}</view> -->
						<!-- foot left Action Extend -->
						<GeneralThumbUp slot="foot_left_extend" class="width100" @likeClick="likeClick" :like_status="item.like_status"
						 :likes="item.likes" :index="index"></GeneralThumbUp>
						<!-- foot right action extend -->
						<view class="right_action" slot="foot_right_extend">
							<view class="iconfont icon-daipingjia" @click="go_articles_details(item)">
								<text style="font-size: 28rpx;">{{ item.comments }}</text>
							</view>
							<text class="iconfont icon-shoucang"></text>
							<button class="btn" :id="index" open-type="share"><text class="iconfont icon-fenxiang"></text></button>
						</view>
					</general-card>
				</mescroll>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from '../../utils/DebouchAndThrottl.js';
	import navBar from '../../components/zhouWei-navBar/index.vue';
	import mescroll from '../../components/mescroll-uni/mescroll-uni.vue';
	import GeneralCard from '../../components/commonComponent/GeneralCard.vue';
	import GeneralThumbUp from '../../components/commonComponent/GeneralThumbUp.vue';
	import mediaScratchableLatex from '../../components/mediaComponents/mediaScratchableLatex.vue';
	import singleMedia from '../../components/mediaComponents/singleMedia.vue';
	export default {
		components: {
			navBar,
			mescroll,
			GeneralCard,
			GeneralThumbUp,
			mediaScratchableLatex,
			singleMedia
		},
		data() {
			return {
				data: {},
				index: 0,
				articleArry: [],
				mescroll: null,
				upOption: {
					onScroll: true,
					use: true, // 是否启用上拉加载; 默认true
					isBounce: true, // 开启浏览器touchmove事件
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					offset: 500, //距离底部还有200px时开始加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					textLoading: '加载中...',
					textNoMore: '没有更多帖子了，去发布一个吧'
				},
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				}
			};
		},
		onShareAppMessage(res) {
			let index;
			if (res.from === 'button') {
				// 来自页面内分享按钮
				index = parseInt(res.target.id);
			}
			let title = '笑死我了，赶快来看看';
			let url = '/pages/index/articleDetails?aid=' + this.articleArry[index].pk;
			return {
				title: title,
				path: url
			};
		},
		methods: {
			changeInd(index) {
				if (index != this.index) {
					// 切换Tab直接清空articleArry并设置全局index
					this.articleArry = [];
					this.index = index;
					this.data.like_type = index;
					this.mescroll.resetUpScroll();
				}
			},
			mescrollInit(mescroll) {
				// 初始化mescroll时的动作
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				// 发生下拉刷新事件直接调用upCallback事件，并mescroll.num == 0
				mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				//上滑加载
				let pageNum = mescroll.num;
				let pageSize = mescroll.size;
				this.data.size = pageSize;
				this.data.page = pageNum;

				this.$http
					.get('/api/user/likes/', {
						data: this.data
					})
					.then(response => {
						let next = response.data.result.next;
						let results = response.data.result.results;
						if (response.statusCode === 200) {
							if (next) {
								next = true;
							} else {
								next = false;
							}
							if (pageNum === 1) {
								this.articleArry = results;
							} else {
								this.articleArry = this.articleArry.concat(results);
							}
							mescroll.endSuccess(results.length, next);
						} else {
							uni.showToast({
								title: '发错错误：' + response.statusCode + '，重新试试吧！',
								icon: 'none'
							});
						}
					})
					.catch(error => {
						mescroll.endErr();
					});
			},
			go_articles_details: throttle(function(item) {
				// 去详情界面
				uni.navigateTo({
					url: '../index/articleDetails?data=' + encodeURIComponent(JSON.stringify(item))
				});
			}, 1000),
			likeClick: throttle(function(like_type, index) {
				if (!this.$store.state.login.isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.switchTab({
						url: '../user/index'
					});
					return;
				}
				this.$http
					.request({
						url: '/api/article/action/',
						method: 'post',
						data: {
							aid: this.articleArry[index].pk,
							like_type: like_type,
							action: 'add_like'
						}
					})
					.then(res => {
						this.articleArry[index].like_status = res.data.result;
						if (this.articleArry[index].like_status.up) {
							this.articleArry[index].likes++;
						} else {
							this.articleArry[index].likes--;
						}
					});
			}, 1000),
			playVideo(videoContext) {
				// 点击播放视频后的事件
				this.palyStatus = true; //设置播放状态
				if (!this.videoContext) {
					// 没有播放的话 直接设置视频控制上下文
					this.videoContext = videoContext;
				}
				if (this.videoContext != videoContext) {
					// 先暂停上一个再播放本次的
					this.videoContext.pause();
					this.videoContext = videoContext;
				}
			},
			scrollPause: throttle(function(mescroll) {
				// 列表滑动事件, 停止播放 防止可视区域超过视频了还在播放
				if (this.videoContext) {
					let nowScrollTop = mescroll.scrollTop - this.oldScrollTop;
					console.log(mescroll, '本次移动' + nowScrollTop);
					if (this.palyStatus && !(nowScrollTop < -50 || nowScrollTop < 50)) {
						this.videoContext.pause();
						this.palyStatus = false;
					}
					this.oldScrollTop = mescroll.scrollTop;
				}
			}, 250)
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.page_container {
		width: 100%;
		height: 100%;
		flex-wrap: wrap;

		.content_container {
			width: 100%;
			margin-top: 136rpx;
			flex-wrap: wrap;
			justify-content: flex-start;

			.tabs_container {
				width: 100%;
				height: 70rpx;
				flex-shrink: 0;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;

				.table_item {
					width: 49%;
					justify-content: center;

					text {
						padding: 0 10rpx 10rpx 10rpx;
					}
				}
			}

			.articles_container {
				width: 100%;
				height: calc(100% - 70rpx);
				position: relative;
				background-color: #f5f5f5;

				general-card {
					width: 100%;
					flex-wrap: wrap;
					margin-bottom: 10rpx;

					.title {
						width: 100%;
						flex-wrap: wrap;
						margin-bottom: 15rpx;
					}

					.close {
						height: 100%;
						align-items: center;
					}

					.medias {
						width: 100%;
					}

					.good_comments {
						width: 100%;
					}

					.left_action {
						height: 55rpx;
						border-radius: 50rpx;
						background-color: #139dfe;

						.after_action {
							height: 100%;
							align-items: center;
							padding: 0 20rpx;

							.icon-up,
							.icon-down {
								font-size: 38rpx;
								font-weight: 600;
								color: white;
							}

							.up_text {
								font-size: 30rpx;
								color: white;
							}
						}

						.before_action {
							height: 100%;
							align-items: center;

							.up {
								height: 100%;
								align-items: center;
								margin-left: 10rpx;

								.icon-up {
									font-size: 38rpx;
									font-weight: 600;
									color: white;
								}

								.up_text {
									font-size: 30rpx;
									color: white;
								}
							}

							.hrs {
								height: 55%;
								border-left: 1rpx #fff solid;
								margin: 0 10rpx;
							}

							.down {
								padding-right: 10rpx;
								align-items: center;
								justify-content: center;

								.icon-down {
									font-size: 38rpx;
									font-weight: 600;
									color: white;
								}
							}
						}
					}

					.right_action {
						width: 265rpx;
						justify-content: space-around;
						align-items: center;

						button::after {
							border: none;
						}

						button {
							padding: 0 !important;
							margin: 0 !important;
							width: 65rpx;
							// height: 50rpx;
							line-height: 50rpx;
							font-size: 50rpx;
							background-color: #fff;
						}

						.icon-shoucang,
						.icon-daipingjia {
							font-size: 40rpx;
						}

						.icon-shoucang:active,
						.icon-daipingjia:active {
							color: #555555;
						}
					}
				}
			}
		}
	}

	// Mescroll CSS
	.mescroll-uni-content .mescroll-downwarp {
		text-align: center;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.downwarp-content {
		justify-content: center;
	}

	.mescroll-upwarp {
		text-align: center;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-top: 0rpx !important;
	}

	.mescroll-uni-content {
		flex-wrap: wrap;
	}

	.mescroll-empty {
		flex-wrap: wrap;
		justify-content: center;
	}

	.mescroll-uni-fixed {
		top: 206rpx !important;
	}

	.empty-tip {
		width: 100%;
		flex-shrink: 0;
		justify-content: center;
	}

	.content {
		height: 100%;
	}
</style>
